<!--
 * @Date: 2024-10-09 17:44:43
 * @Author: Yu Weifeng weifeng.yu@gientech.com
 * @Description: 行政区划选择
-->
<template>
  <el-cascader
    v-model="innerValue"
    class="lc-area-selector"
    :options="options"
    :props="areaProps"
    clearable
    v-bind="$attrs"
  ></el-cascader>
</template>
<script setup>
import { ref, computed } from 'vue';
import { AreaCityData } from './area-format-data';
const props = defineProps({
  modelValue: {
    type: [Number, String, Array],
    default: ''
  },
  level: {
    type: Number,
    default: 1
  }
});

const emits = defineEmits(['update:modelValue']);
const innerValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits('update:modelValue', val);
  }
});
const areaProps = {
  label: 'n',
  value: 'i',
  lazy: true,
  lazyLoad(node, resolve) {
    const { level, data } = node;
    const nodes = AreaCityData.filter((item) => item.p == data.i).map((item) => ({
      ...item,
      leaf: level >= props.level
    }));
    resolve(nodes);
  }
};
const options = ref(AreaCityData.filter((el) => el.p == 0));
</script>
